import React from 'react';
import { Menu } from 'antd';
import { NavLink } from 'react-router-dom';
import MenuConfig from '@/router/routerConfig';
import { switchMenu } from '@/redux/action'
import { connect } from 'react-redux'
import './index.less';

const SubMenu = Menu.SubMenu;

class NavLeft extends React.Component {
    state = {
        currentKey: "",
    }
    componentWillMount() {
        let isAdministrator = localStorage.getItem("isAdministrator");
        let menusList = localStorage.getItem("menusList");
        let menusArr = MenuConfig;

        // let menusArr = menusList ? JSON.parse(menusList) : [];
        //获取当前路由
        let currentKey = window.location.hash.replace(/#|\?.*$/g, '');
        this.setState({
            isAdministrator,
            menusArr,
            currentKey,
        })
        /*this.setState({
            menuTreeNode
        })*/
    }
    handleMenuClick = (item) => {
        let menuLv2 = item.item.props.parentMenu.props;
        let menuLv1 = "";
        if (menuLv2.parentMenu) {
            menuLv1 = menuLv2.parentMenu.props;
        }
        //console.log(menuLv2);
        //console.log(menuLv1);
        const { dispatch } = this.props;
        let menuTitle = item.item.props.title;
        let cascadeMenu = {
            menuNameLv1: menuLv1 ? menuLv1.title : "",
            menuNameLv2: menuLv1 ? menuLv2.title : "",
            menuTitle
        }
        //console.log(cascadeMenu)
        //dispatch(switchMenu(menuTitle));
        dispatch(switchMenu(cascadeMenu));
        localStorage.setItem("_cascadeMenu", JSON.stringify(cascadeMenu));
        this.setState({
            currentKey: item.key
        })
    }
    //遍历权限key对比菜单key，包含则返回true
    find = (key) => {
        let menusArr = this.state.menusArr;
        for (let i = 0; i < menusArr.length; i++) {
            let value = menusArr[i];
            if (value.indexOf(key) >= 0) {
                return true
            }
        }
        return false
    };
    //菜单渲染
    renderMenu = (data) => {
        return data.map((item) => {
            if (!item.hidden) {
                //先判断是否包含在权限菜单中
                if (this.state.isAdministrator == "administrator") {
                    if (item.children) {
                        return (
                            <SubMenu title={item.title} key={item.path}>
                                {this.renderMenu(item.children)}
                            </SubMenu>
                        )
                    }
                    return (
                        <Menu.Item title={item.title} key={item.path}>
                            <NavLink to={item.path}>{item.title}</NavLink>
                        </Menu.Item>
                    )
                } else {
                    // if (this.find(item.key)){
                    if (item.children) {
                        return (
                            <SubMenu title={item.title} key={item.path}>
                                {this.renderMenu(item.children)}
                            </SubMenu>
                        )
                    }
                    return (
                        <Menu.Item title={item.title} key={item.path}>
                            <NavLink to={item.path}>{item.title}</NavLink>
                        </Menu.Item>
                    )
                    // }
                }
            }

        })
    };

    render() {
        const menuTreeNode = this.renderMenu(MenuConfig);
        return (
            <div className="nav-left">
                <div className="logo">
                    <img src="/assets/logo-ant.svg" alt="" />
                    <h1>LIMS管理系统</h1>
                </div>
                <Menu
                    onClick={this.handleMenuClick}
                    theme="dark"
                    mode="inline"
                    selectedKeys={[this.state.currentKey]}>
                    {menuTreeNode}
                </Menu>
            </div>
        );
    }
}
export default connect()(NavLeft)